/******************** 变量 ********************/
$lv-timeline-dot-content-width: 0.16rem;
$lv-timeline-dot-content-height: 0.22rem;
$lv-timeline-dot-size: 0.08rem;
$lv-timeline-dot-offset: 0.01rem;
$lv-timeline-dot-tail-color: $border-color-base;
$lv-timeline-dot-bg-color-normal: $primary-color;
$lv-timeline-container-space: 0.32rem;

%lv-timeline-center-position {
  left: 50%;
  transform: translateX(-50%);
}

%lv-timeline-alternate-left {
  right: 0;
  left: calc(50% + 0.24rem);
  width: calc(50% - 0.24rem);
  text-align: left;
}

%lv-timeline-alternate-right {
  right: calc(50% + 0.24rem);
  left: 0;
  width: calc(50% - 0.24rem);
  text-align: right;
}

/******************** 组件 ********************/
// =============== timeline ===================
.lv-timeline {
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  font-variant: tabular-nums;
  font-feature-settings: 'tnum';
  line-height: $line-height-coeff-minor;

  &-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

// =============== timelineItem ===================
lv-timeline-item {
  &:last-of-type {
    .lv-timeline-item {
      padding-bottom: 0;

      &-tail {
        display: none;
      }
    }
  }
}

.lv-timeline-item {
  position: relative;
  min-height: $lv-timeline-dot-content-height;
  margin: 0;
  padding-bottom: $padding-xl;
  font-size: $font-size-base;
  list-style: none;

  &-axis {
    position: absolute;
    height: 100%;
    text-align: center;
  }

  // =============== 连接线 ===================
  &-tail {
    position: absolute;
    top: $lv-timeline-dot-content-height - $lv-timeline-dot-offset;
    bottom: -$lv-timeline-dot-offset;
    border-left: $border-width-base $border-style-base $lv-timeline-dot-tail-color;

    @extend %lv-timeline-center-position;
  }

  // =============== 圆点 ===================
  &-dot-content {
    width: $lv-timeline-dot-content-width;
    height: $lv-timeline-dot-content-height;
    padding: 0.07rem $padding-xs;
    border-radius: 100%;
  }

  &-dot {
    position: absolute;
    display: block;
    width: $lv-timeline-dot-size;
    height: $lv-timeline-dot-size;
    background-color: $lv-timeline-dot-bg-color-normal;
    border-radius: $border-radius-circle;

    // 自定义状态颜色
    &-normal {
      color: $lv-timeline-dot-bg-color-normal;
    }

    &-info {
      color: $feedback-color-info;
      background-color: $feedback-color-info;
    }

    &-success {
      background-color: $feedback-color-success;
      border-color: $feedback-color-success;
    }

    &-warning {
      color: $feedback-color-warning;
      background-color: $feedback-color-warning;
    }

    &-error {
      color: $feedback-color-error;
      background-color: $feedback-color-error;
    }

    &-custom {
      width: auto;
      height: auto;
      line-height: 1;
      text-align: center;
      background-color: transparent;
      border-radius: 0;
    }
  }

  &-dot-custom {
    @extend %lv-timeline-center-position;

    top: 0.03rem;
  }

  // =============== 内容 ===================
  &-container {
    position: relative;
    word-break: break-word;
  }

  &-content {
    color: $text-color;
    font-size: $font-size-base;
    line-height: $line-height-coeff;
  }

  &-time {
    display: block;
    color: $text-color-tertiary;
    font-size: $font-size-sm;
    line-height: $line-height-sm;
  }
}

// =============== mode: 居左 ===================
.lv-timeline-left {
  .lv-timeline-item {
    &-axis {
      left: 0;
    }

    &-container {
      margin-left: $lv-timeline-container-space;
    }
  }
}

// =============== mode: 居右 ===================
.lv-timeline-right {
  .lv-timeline-item {
    &-axis {
      right: 0;
    }

    &-container {
      margin-right: $lv-timeline-container-space;
      text-align: right;
    }
  }
}

// 交叉和自定义公共样式
.lv-timeline-alternate,
.lv-timeline-customize {
  .lv-timeline-item {
    &-axis {
      @extend %lv-timeline-center-position;
    }

    &-container {
      @extend %lv-timeline-alternate-left;
    }
  }
}

// =============== mode: 交叉 ===================
.lv-timeline-alternate {
  lv-timeline-item {
    &:nth-of-type(even) {
      .lv-timeline-item {
        &-container {
          @extend %lv-timeline-alternate-right;
        }
      }
    }
  }
}

// =============== mode: 平铺 ===================
.lv-timeline-tiled {
  display: table;

  lv-timeline-item {
    display: table-row-group;
  }

  .lv-timeline-item {
    display: table-row;

    .lv-timeline-item-time,
    .lv-timeline-item-axis,
    .lv-timeline-item-content {
      display: table-cell;
    }

    .lv-timeline-item-axis {
      position: relative;
      width: $lv-timeline-dot-content-width;
      height: 100%;
      padding: 0 $padding-md;
      overflow: hidden;
    }

    .lv-timeline-item-time,
    .lv-timeline-item-content {
      padding-bottom: $padding-xl;
      line-height: $line-height-base;
      vertical-align: top;
    }
  }
}

// =============== mode: 自定义 ===================
.lv-timeline-customize {
  .lv-timeline-item {
    &-left {
      .lv-timeline-item-container {
        @extend %lv-timeline-alternate-left;
      }
    }

    &-right {
      .lv-timeline-item-container {
        @extend %lv-timeline-alternate-right;
      }
    }

    &-tiled {
      .lv-timeline-item-container {
        left: 0;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 100%;
        margin: 0;

        .lv-timeline-item-content {
          width: 50%;
          padding-left: $padding-lg;
          text-align: left;
        }

        .lv-timeline-item-time {
          width: 50%;
          padding-right: $padding-lg;
          line-height: $line-height-base;
          text-align: right;
        }
      }
    }
  }
}

// =============== reverse ===================
.lv-timeline-reverse {
  lv-timeline-item {
    &:first-of-type {
      .lv-timeline-item {
        padding-bottom: 0;

        &-tail {
          display: none;
        }
      }
    }

    &:last-of-type {
      .lv-timeline-item {
        padding-bottom: $lv-timeline-container-space;

        &-tail {
          display: block;
        }
      }
    }
  }
}
